<template>
    <div id="home" :style="`height:${heigth}`">
        <span style="color:#5af5e6">您当前所在地：<span style="color:#1989fa">  甘肃 兰州</span>
        <span style="    position: absolute;top: 1px;right: 10px;">
        <van-icon name="location" size="20px" color="black"></van-icon>
        </span>
        </span>
        <div class="t-ctn">
        <div class="s-ctn" >
            <div v-for="(data,index) in hotList" :key="index" class="s-ctn-z">
               <img :src="data.src" width="98%" height="100px">
               <div style="font-size: 16px;display: flex;justify-content: space-evenly;"><van-tag plain type="success">{{data.name}}</van-tag>  <span style="color:#b9b6b6">45Km</span> </div>
               <a v-bind="{href:'tel:'+data.phone}" ><van-icon name="phone" size="18px"/></a> 
            </div>
        </div>
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            heigth:'',
            hotList:[
                {
                    id:'1',
                    src:'http://img4.imgtn.bdimg.com/it/u=13021100,3457084148&fm=11&gp=0.jpg',
                    phone:'17693151456',
                    name:'拉布拉多'
                },
                 {
                    id:'2',
                    src:'http://img2.imgtn.bdimg.com/it/u=4217833134,1630254564&fm=11&gp=0.jpg',
                     phone:'17693151456',
                    name:'贵宾犬'
                },
                 {
                    id:'3',
                    src:'http://img1.imgtn.bdimg.com/it/u=2293085928,1127368489&fm=11&gp=0.jpg',
                     phone:'17693151456',
                    name:'德国牧羊犬'
                },
                 {
                    id:'4',
                    src:'http://img0.imgtn.bdimg.com/it/u=4255471688,2177182808&fm=11&gp=0.jpg',
                     phone:'17693151456',
                    name:'哈士奇'
                },
                 {
                    id:'5',
                    src:'http://img2.imgtn.bdimg.com/it/u=1488626001,1937949923&fm=26&gp=0.jpg',
                     phone:'17693151456',
                    name:'老土狗'
                },
            ]
        }
    },

    created(){
        this.heigth = window.innerHeight+"px";
    }
}
</script>

<style scoped>
    #home{
        background-color: #f5f5f5;
        width: 100%;
    }
 .t-ctn {
        width: 100%;
        overflow-x: auto;
        margin-top: 10px;
    }

    .t-ctn .s-ctn {
        height: 150px;
        white-space: nowrap;
        font-size: 0;
    }

    .t-ctn .s-ctn .s-ctn-z {
        font-size: 12px;
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        display: inline-block;
        width: 200px;
        height: 100%;
        /* border: 1px solid #eae5e5; */
        background: white;
        text-align: center;
    }
</style>